<template>
  <div class="wrapper">
    <parallax class="section page-header header-filter" :style="headerStyle">
      <div class="container">
        <div class="md-layout" align="center">
			<!-- 轮播图 -->
			 <el-carousel :interval="5000" type="card" height="330px" style="width: 2100px;">
			    <el-carousel-item v-for="item in 15" :key="item">
			      <h3 class="medium">{{ item }}</h3>
				  <!-- 卡片-->
				  <div id="container" style="margin:-200px;">
				  			<!-- Start	Product details -->
				  				<div class="product-details">	 					
				  					<!-- 	Product Name -->
				  				<h1 style="right:-70px;">专业老师</h1>
				  			<!-- The most important information about the product -->
				  					<p class="information">
				  								点击即可了解
				  								</p>
				  			<!-- 		Control -->
				  			<div class="control">
				  				
				  			<!-- Start Button buying -->
				  				<button class="btn" @click="gotolink">
				  			<!-- 		the Price -->
									<span class="buy">点击咨询</span>
								</button>
				  				<!-- End Button buying -->	
				  			</div>
				  						
				  			</div>
				  				
				  			<!-- 	End	Product details   -->
				  			
				  			<!-- 	Start product image & Information -->
				  				
				  			<div class="product-image">
				  				
				  				<img src="../assets/img/faces/camp.jpg">
				  				
				  			<!-- 	product Information-->
				  			<div class="info">
				  				<ul>
				  					<li><strong>颜值: </strong>帅</li>
				  					<li><strong>专业: </strong>强</li>
				  					<li><strong>服务度: </strong>好</li>
				  					<li><strong>回复率: </strong>高</li>
				  					<li><strong>好评度: </strong>高</li>
				  					<li><strong>微笑哥:</strong>是</li>
				  				</ul>
				  			</div>
				  			</div>
				  			<!--  End product image  -->
				  			</div>
				  						<!-- 第二遍 -->
			    </el-carousel-item>
			  </el-carousel>
			<!-- 轮播图 -->
		     <!-- 复制图片-->
			 
        </div>
      </div>
    </parallax>
    <div class="main main-raised">
      <div class="section">
        <div class="container">
          
          
        </div>
      </div>
      <div class="section text-center">
        <div class="container">
          <h2 class="title">Here is our team</h2>
          <div class="team">
            <div class="md-layout">
              <div class="md-layout-item md-medium-size-33 md-small-size-100">
                <div class="team-player">
                  <md-card class="md-card-plain">
                    <div class="md-layout-item md-size-50 mx-auto">
                      <img
                        :src="teamImg1"
                        alt="Thumbnail Image"
                        class="img-raised rounded-circle img-fluid"
                      />
                    </div>
                    <h4 class="card-title">
                      Gigi Hadid
                      <br />
                      <small class="card-description text-muted">Model</small>
                    </h4>
                    <md-card-content>
                      <p class="card-description">
                        You can write here details about one of your team
                        members. You can give more details about what they do.
                        Feel free to add some <a href="#">links</a> for people
                        to be able to follow them outside the site.
                      </p>
                    </md-card-content>

                    <md-card-actions class="text-center">
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-twitter"></i>
                      </md-button>
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-instagram"></i>
                      </md-button>
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-facebook-square"></i>
                      </md-button>
                    </md-card-actions>
                  </md-card>
                </div>
              </div>
              <div class="md-layout-item md-medium-size-33 md-small-size-100">
                <div class="team-player">
                  <md-card class="md-card-plain">
                    <div class="md-layout-item md-size-50 mx-auto">
                      <img
                        :src="teamImg2"
                        alt="Thumbnail Image"
                        class="img-raised rounded-circle img-fluid"
                      />
                    </div>
                    <h4 class="card-title">
                      Carla Hortensia
                      <br />
                      <small class="card-description text-muted"
                        >Designer</small
                      >
                    </h4>

                    <md-card-content>
                      <p class="card-description">
                        You can write here details about one of your team
                        members. You can give more details about what they do.
                        Feel free to add some <a href="#">links</a> for people
                        to be able to follow them outside the site.
                      </p>
                    </md-card-content>

                    <md-card-actions class="text-center">
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-twitter"></i>
                      </md-button>
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-linkedin"></i>
                      </md-button>
                    </md-card-actions>
                  </md-card>
                </div>
              </div>
              <div class="md-layout-item md-medium-size-33 md-small-size-100">
                <div class="team-player">
                  <md-card class="md-card-plain">
                    <div class="md-layout-item md-size-50 mx-auto">
                      <img
                        :src="teamImg3"
                        alt="Thumbnail Image"
                        class="img-raised rounded-circle img-fluid"
                      />
                    </div>
                    <h4 class="card-title">
                      Kendall Jenner
                      <br />
                      <small class="card-description text-muted">Model</small>
                    </h4>

                    <md-card-content>
                      <p class="card-description">
                        You can write here details about one of your team
                        members. You can give more details about what they do.
                        Feel free to add some <a href="#">links</a> for people
                        to be able to follow them outside the site.
                      </p>
                    </md-card-content>

                    <md-card-actions class="text-center">
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-twitter"></i>
                      </md-button>
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-instagram"></i>
                      </md-button>
                      <md-button
                        href="javascript:void(0)"
                        class="md-just-icon md-simple"
                      >
                        <i class="fab fa-facebook-square"></i>
                      </md-button>
                    </md-card-actions>
                  </md-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section section-contacts">
        <div class="container">
          <div class="md-layout">
            <div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto">
              <h2 class="text-center title">Work with us</h2>
              <h4 class="text-center description">
                Divide details about your product or agency work into parts.
                Write a few lines about each one and contact us about any
                further collaboration. We will responde get back to you in a
                couple of hours.
              </h4>
              <form class="contact-form">
                <div class="md-layout">
                  <div class="md-layout-item md-size-50">
                    <md-field>
                      <label>Your Name</label>
                      <md-input v-model="name" type="text"></md-input>
                    </md-field>
                  </div>
                  <div class="md-layout-item md-size-50">
                    <md-field>
                      <label>Your Email</label>
                      <md-input v-model="email" type="email"></md-input>
                    </md-field>
                  </div>
                </div>
                <md-field maxlength="5">
                  <label>Your Message</label>
                  <md-textarea v-model="message"></md-textarea>
                </md-field>
                <div class="md-layout">
                  <div class="md-layout-item md-size-33 mx-auto text-center">
                    <md-button class="md-success">Send Message</md-button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
	/* 轮播图展示 */
	onload = function(){
	      var btns = document.getElementsByClassName('btn'),
	          imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');
	
	      var index = 2,
	          front = 0,
	          back = 0,
	          offset = false,
	          timer = setInterval(timer,5000);
	          
	
	
	      for(var i=0;i<btns.length;i++){
	        (function(i){
	          btns[i].onclick = function(){click(i)};
	        })(i);
	
	        btns[i].onmouseover = function(){
	          offset = true;
	        }
	        btns[i].onmouseout = function(){
	          offset = false;
	        }
	      }
	
	      for(var i=0;i<imgs.length;i++){
	        imgs[i].onmouseover = function(){
	          offset = true;
	        }
	        imgs[i].onmouseout = function(){
	          offset = false;
	        }
	      }
	
	      function timer(){
	        console.log(offset)
	        if(offset){
	          return;
	        }
	        else{
	          click(1)
	        }
	      }
	
	      function click(x){
	        imgs[index].setAttribute('class','');
	        if(x === 0){
	         if(--index < 0){
	            index = --imgs.length;
	          }
	          front = back = index;
	          if(++front > --imgs.length){front = 0}
	          if(--back < 0){back = --imgs.length}
	          imgs[front].style.zIndex = '1';
	          imgs[back].style.zIndex = '0';
	        }
	        else{     
	          if(++index > --imgs.length){
	            index = 0;        
	          }
	          front = back = index;
	          if(++front > --imgs.length){front = 0}
	          if(--back < 0){back = --imgs.length}
	          imgs[front].style.zIndex = '0';
	          imgs[back].style.zIndex = '1';
	        }
	        imgs[index].style.zIndex = '10';
	        imgs[front].setAttribute('class','front')
	        imgs[back].setAttribute('class','back')  
	        imgs[index].setAttribute('class','active');
	      }
	    }
	/* 轮播图展示 */

export default {
  bodyClass: "landing-page",
  props: {
    header: {
      type: String,
      default: require("@/assets/img/bg7.jpg")
    },
    teamImg1: {
      type: String,
      default: require("@/assets/img/faces/avatar.jpg")
    },
    teamImg2: {
      type: String,
      default: require("@/assets/img/faces/christian.jpg")
    },
    teamImg3: {
      type: String,
      default: require("@/assets/img/faces/kendall.jpg")
    }
  },
  data() {
    return {
      name: null,
      email: null,
      message: null,
      infoPagination: 2
    };
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.header})`
      };
    }
  },
   methods:{
          gotolink(){
            this.$router.replace('/teach')
          }
   }
};
</script>

<style lang="scss" scoped>
.md-card-actions.text-center {
  display: flex;
  justify-content: center !important;
}
.contact-form {
  margin-top: 30px;
}

.md-has-textarea + .md-layout {
  margin-top: 15px;
}


/* 轮播图 */
/* 展示单 */
	/* fonts  */
	@import url('https://fonts.googleapis.com/css?family=Abel|Aguafina+Script|Artifika|Athiti|Condiment|Dosis|Droid+Serif|Farsan|Gurajada|Josefin+Sans|Lato|Lora|Merriweather|Noto+Serif|Open+Sans+Condensed:300|Playfair+Display|Rasa|Sahitya|Share+Tech|Text+Me+One|Titillium+Web');
	body {
	background: #DFC2F2;
		background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
		background-attachment: fixed;	
		background-size: cover;
		}
	
	#container{
		box-shadow: 0 15px 30px 1px rgba(128, 128, 128, 0.31);
		background: rgba(255, 255, 255, 0.90);
		text-align: center;
		border-radius: 5px;
		overflow: hidden;
		margin: 5em auto;
		height: 350px;
		width: 700px;
		
	}
	
	/* 	Product details  */
	.product-details {
		position: relative;
		text-align: left;
		overflow: hidden;
		padding: 30px;
		height: 100%;
		float: left;
		width: 40%;
		font-family:"黑体";
	
	}
	
	/* 	Product Name */
	#container .product-details h1{
		font-family: 'Old Standard TT', serif;
		display: inline-block;
		position: relative;
		font-size: 34px;
		font-family: "黑体";
		color: #344055;
		margin: 0px;
		padding: 0px;
		
		
	}
	
	/*Product Rating  */
	.hint-star {
		display: inline-block;
		margin-left: 0.5em;
		color: gold;
		width: 50%;
	}
	
	
	/* The most important information about the product */
	#container .product-details > p {
		font-family: 'Farsan', cursive;
		text-align: center;
		font-size: 10px;
		color: #7d7d7d;
		font-family: "黑体";
		
		
	}
	
	/* control */
	
	.control{
		position: absolute;
		bottom:20%;
		left: 42.8px;
		
		
	}
	/* the Button */
	.btn {
		transform: translateY(0px);
		transition: 0.3s linear;
		background: #49C608;
		border-radius: 5px;
	  position: relative;
	  overflow: hidden;
		cursor: pointer;
		outline: none;
		border: none;
		color: #eee;
		padding: 0px;
		bottom: -40px;
		margin: 50px;
		
	}
	
	.btn:hover{transform: translateY(-4px);}
	
	.btn span {
		font-family: 'Farsan', cursive;
		transition: transform 0.3s;
		display: inline-block;
	  padding: 10px 20px;
		font-size: 1.2em;
		margin:0;
		
	}
	/* shopping cart icon */
	.btn .price, .shopping-cart{
		background: #333;
		border: 0;
		margin: 0;
	}
	
	.btn .price {
		transform: translateX(-10%); padding-right: 15px;
	}
	
	/* the Icon */
	.btn .shopping-cart {
		transform: translateX(-100%);
	  position: absolute;
		background: #333;
		z-index: 1;
	  left: 0;
	  top: 0;
	}
	
	/* buy */
	.btn .buy {z-index: 3;font-family:"微软雅黑";}
	
	.btn:hover .price {transform: translateX(-110%);position: 30px;}
	
	.btn:hover .shopping-cart {transform: translateX(0%);}
	
	
	
	/* product image  */
	.product-image {
		transition: all 0.3s ease-out;
		display: inline-block;
		position: relative;
		overflow: hidden;
		height: 100%;
		float: right;
		width: 50%;
		display: inline-block;
		margin: 0px;
	}
	
	#container img {width: 100%;height: 100%;}
	
	.info {
	    background: rgba(27, 26, 26, 0.9);
	    font-family: '微软雅黑', cursive;
	    transition: all 0.3s ease-out;
	    transform: translateX(-100%);
	    position: absolute;
	    line-height: 1.9;
	    text-align: left;
	    font-size: 80%;
	    cursor: no-drop;
	    color: #FFF;
	    height: 100%;
	    width: 100%;
	    left: 0;
	    top: 0;
		
	}
	
	.info h2 {text-align: center}
	.product-image:hover .info{transform: translateX(0);}
	
	.info ul li{transition: 0.3s ease;}
	.info ul li:hover{transform: translateX(50px) scale(1.3);}
	
	.product-image:hover img {transition: all 0.3s ease-out;}
	.product-image:hover img {transform: scale(1.2, 1.2);}
	/* 轮播图样式 */
	.el-carousel__item h3 {
	    color: #475669;
	    font-size:300px;
	    opacity: 0;
	    line-height: 200px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
</style>
